<template>
    <div>
        <div class="top-warp">
            <div>紫点job</div>
            <div class="top-r">
                <span v-if="this.$store.state.user&&this.$store.state.token">{{this.$store.state.user}}</span>
                <span class="finger" v-if="!this.$store.state.user&&!this.$store.state.token" @click="toPage('login')">个人登录</span>
                <span class="finger" v-if="this.$store.state.user&&this.$store.state.token" @click="quit">退出</span>
                <span class="finger" v-if="!this.$store.state.user&&!this.$store.state.token" @click="toRegister()">注册</span>
                <span class="finger" @click="toCompany">企业登录</span>
            </div>
        </div>
        <div class="bottom-warp">
            <div class="nav-item" :class="flag == item.paths ? 'flag-color':''" v-for="(item,index) in navList" :key="index" @click="changeFlag(item.paths)">
                <span><img :src="flag == item.paths ? item.img1:item.img"></span>
                <span>{{item.name}}</span>
            </div>
        </div>
    </div>
</template>
<script>
import store from "../vuex/store.js";
    export default {
        data() {
            return {
                flag: '/',
                navList: [{
                        img: require('../assets/images/zhiwei.png'),
                        img1: require('../assets/images/zhiwei1.png'),
                        name: '职位',
                        paths: '/'
                    },
                    {
                        img: require('../assets/images/wanglai.png'),
                        img1: require('../assets/images/wanglai1.png'),
                        name: '往来',
                        paths: '/personalRecord'
                    }, {
                        img: require('../assets/images/jianli.png'),
                        img1: require('../assets/images/jianli1.png'),
                        name: '简历',
                        paths: '/myResume'
                    },
                ]
            }
        },
        watch:{
        },
        mounted(){
            this.getItem()
        },
        methods: {
            getItem(){
               this.$store.commit('_getItem')
            },
            changeFlag(e) {
                this.flag = e;
                this.$router.push(e)
            },
            toPage(e) {
                this.$router.push({
                    name: e
                })
            },
            toRegister() {
                this.$router.push({
                    name: 'register',
                    params: {
                        userClass: 1
                    }
                })
            },
            quit(){
                this.$store.commit('_removeItem')
            },
            toCompany(){
                location.href='/company'
            }
        }
    }
</script>
<style scoped>
    .top-warp {
        padding: 1rem 2rem;
        width: 100%;
        position: fixed;
        top: 0;
        display: flex;
        justify-content: space-between;
        color: #fff;
        background: #800080;
        align-items: center;
        border-bottom: 0.01rem solid #fff;
    }
    .top-r {
        font-size: 0.8rem;
        width: 30%;
        display: flex;
        justify-content: space-around;
    }
    .bottom-warp {
        display: flex;
        position: fixed;
        bottom: 0;
        width: 100%;
        background: #f5f5f5;
    }
    .nav-item {
        width: 33.33%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .nav-item img {
        width: 2rem;
        height: 2rem;
    }
    .flag-color {
        color: #800080;
        border-bottom: 0.2rem solid #800080;
        background: #f3e5f5;
    }
</style>


